<template>
    <view class="overall">
        <view class="title">
            <view class="name">个人中心</view>
        </view>
        <view class="user">
            <view>
                <image 
                    :src="avatarUrl"
                    mode="aspectFill">
                </image>
                <view>
                    <view style="font-weight: bold;padding-top: 5rpx;">
                        {{ userInfo.nickName || '微信用户' }}
                    </view>
                    <view style="align-items: center;" @click="gotoPatient">
                        <view>就诊卡</view>
                        <view style="color: #3ECCB2;font-weight: bold;">{{ cardInfo.length }}</view>
                        <view>张</view>
                        <wd-icon name="arrow-right" size="40rpx" color='#999999'></wd-icon>
                    </view>
                </view>
            </view>
            <view class="userCard">
                <view>
                    <view style="font-weight: bold;font-size: 32rpx;">{{ userInfo.nickName || '微信用户' }}</view>
                    <view class="card">默认卡</view>
                    <view class="card">电子就诊卡</view>
                </view>
            </view>
        </view>
        <view class="list">
            <view @click="gotoPatient">
                <view>
                    <image src="/static/my1.png" mode="aspectFit"></image>
                    <view>就诊卡管理</view>
                </view>
                <wd-icon name="arrow-right" size="50rpx" color='#999999'></wd-icon>
            </view>
            
            <view>
                <view>
                    <image src="/static/my2.png" mode="aspectFit"></image>
                    <view>门诊缴费记录</view>
                </view>
                <wd-icon name="arrow-right" size="50rpx" color='#999999'></wd-icon>
            </view>
            <view>
                <view>
                    <image src="/static/my3.png" mode="aspectFit"></image>
                    <view>住院缴费记录</view>
                </view>
                <wd-icon name="arrow-right" size="50rpx" color='#999999'></wd-icon>
            </view>
            <view>
                <view>
                    <image src="/static/my4.png" mode="aspectFit"></image>
                    <view>我的收藏</view>
                </view>
                <wd-icon name="arrow-right" size="50rpx" color='#999999'></wd-icon>
            </view>
            <view @click="showConfirm"> <!-- 保留弹窗触发 -->
                <view>
                    <image src="/static/my5.png" mode="aspectFit"></image>
                    <view>清除缓存</view> 
                </view>
                <wd-icon name="arrow-right" size="50rpx" color='#999999'></wd-icon>
            </view>
        </view>
        
        <!-- 确认弹窗 -->
        <view class="modal-mask" v-if="showModal">
            <view class="modal-container">
                <view class="modal-title">提示</view>
                <view class="modal-content">确定要清除缓存吗？</view> <!-- 修改弹窗内容 -->
                <view class="modal-footer">
                    <view class="modal-btn cancel" @click="cancelClear">取消</view>
                    <view class="modal-btn confirm" @click="confirmClear">确定</view>
                </view>
            </view>
        </view>
    </view>
    <!-- 底部导航栏 -->
    <view class="bottom">
        <view class="bottom-item" @click="gotoHome">
            <image alt="首页" src="/static/home.png"/>
            <text>首页</text>
        </view>
        <view class="bottom-item" @click="gotoHospital">
            <image alt="医院信息" src="/static/message.png"/>
            <text>医院信息</text>
        </view>
        <view class="bottom-item" @click="gotoExpert">
            <image alt="专家榜" src="/static/icon3.png" />
            <text>专家榜</text>
        </view>
        <view class="bottom-item" @click="gotoMessage">
            <image alt="消息" src="/static/icon4.png"/>
            <text>消息</text>
        </view>
        <view class="bottom-item" @click="gotoPersonal">
            <image src="/static/my.png" alt="我的" />
            <text style="color: #00DACA;">我的</text>
        </view>
    </view>
</template>

<script>
    import {
        card
    } from '@/api/index.js';

    export default {
        data() {
            return {
                cardInfo: [],
                userInfo: {
                    nickName: '微信用户'
                },
                avatarUrl: '',
                showModal: false // 保留弹窗控制变量
            };
        },
        onLoad() {
            this.fun();
        },
        onShow() {
            this.fun();
        },
        methods: {
            fun() {
                uni.getStorage({
                    key: 'avatarUrl',
                    success: (res) => {
                        this.avatarUrl = res.data || '';
                        this.getUserInfo();
                    },
                    fail: () => {
                        this.getUserInfo();
                    }
                });
            },
            
            getUserInfo() {
                uni.getStorage({
                    key: 'user',
                    success: (res) => {
                        if (res.data && res.data.data) {
                            this.userInfo = res.data.data;
                            
                            if (this.userInfo.avatarUrl) {
                                this.userInfo.avatarUrl = this.userInfo.avatarUrl.replace('//img', '/img');
                                if (!this.avatarUrl) {
                                    this.avatarUrl = this.userInfo.avatarUrl;
                                }
                            }
                            
                            uni.getStorage({
                                key: 'userInfo',
                                success: (userInfoRes) => {
                                    if (userInfoRes.data && userInfoRes.data.nickName) {
                                        this.userInfo.nickName = userInfoRes.data.nickName;
                                    }
                                }
                            });
                        }
                        
                        if (this.userInfo && this.userInfo.id) {
                            card({
                                user_id: this.userInfo.id,
                            }).then(res => {
                                this.cardInfo = res.data || [];
                            });
                        }
                    }
                });
            },
            
            gotoPatient() {
                uni.navigateTo({
                    url: '/pages/patient/patient'
                });
            },
            
            showConfirm() {
                this.showModal = true;
            },
            
            cancelClear() {
                this.showModal = false;
            },
            
            confirmClear() {
                uni.redirectTo({
                    url: '/pages/index/index' 
                });
                this.showModal = false;
            },
            
            gotoHome() {
                uni.redirectTo({
                    url: '/pages/home/home'
                });
            },
            
            gotoHospital() {
                uni.redirectTo({
                    url: '/pages/information/information'
                });
            },
            
            gotoExpert() {
                uni.redirectTo({
                    url: '/pages/expert/expert'
                });
            },
            
            gotoMessage() {
                uni.redirectTo({
                    url: '/pages/message/message'
                });
            },
            
            gotoPersonal() {
                uni.redirectTo({
                    url: '/pages/personal/personal'
                });
            }
        }
    };
</script>

<style scoped>
    .overall {
        width: 100%;
        min-height: 100vh;
        background-color: #F4F4F4;
        padding-bottom: 100rpx;
    }

    .title {
        width: 100%;
        height: 180rpx;
        background-color: #00DACA;
        display: flex;
        justify-content: center;
        color: white;
        align-items: center;
        font-size: 42rpx;
        font-weight: bold;
    }

    .name {
        padding-top: 60rpx;
    }

    .user {
        width: 100%;
        height: 320rpx;
        background-color: white;
    }

    .user image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-left: 30rpx;
    }

    .user>view:first-child {
        display: flex;
        padding-top: 30rpx;
        width: 94%;
        margin-left: 3%;
        margin-right: 3%;
    }

    .user>view:first-child>view {
        margin-left: 30rpx;
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .user>view:first-child>view>view {
        display: flex;
    }

    .user>view:first-child>view>view:last-child {
        width: 40%;
        justify-content: space-between;
    }

    .userCard {
        margin-top: 20rpx;
        height: 150rpx;
        width: 94%;
        margin-left: 3%;
        margin-right: 3%;
        background-color: #3ECCB2;
        border-radius: 10rpx;
    }

    .userCard>view {
        display: flex;
        width: 70%;
        margin-left: 5%;
        color: white;
        padding-top: 18rpx;
        justify-content: space-between;
        align-items: center;
    }

    .list {
        margin-top: 30rpx;
        width: 100%;
        background-color: white;
    }

    .card {
        border: 1rpx white solid;
        padding: 5rpx 10rpx;
        border-radius: 10rpx;
        font-size: 24rpx;
        margin-right: 10rpx;
    }

    .list image {
        width: 60rpx;
        height: 60rpx;
        margin-right: 30rpx;
    }

    .list>view {
        display: flex;
        width: 94%;
        height: 100rpx;
        margin-left: 3%;
        margin-right: 3%;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx solid #f5f5f5;
    }

    .list>view>view {
        display: flex;
        align-items: center;
    }
    
    /* 确认弹窗样式 */
    .modal-mask {
        position: fixed;
        z-index: 9998;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .modal-container {
        width: 80%;
        max-width: 500rpx;
        background-color: #fff;
        border-radius: 20rpx;
        overflow: hidden;
    }
    
    .modal-title {
        padding: 30rpx 20rpx;
        text-align: center;
        font-weight: bold;
        font-size: 36rpx;
    }
    
    .modal-content {
        padding: 0 20rpx 30rpx;
        text-align: center;
        font-size: 32rpx;
        color: #333;
    }
    
    .modal-footer {
        display: flex;
        border-top: 1rpx solid #eee;
    }
    
    .modal-btn {
        flex: 1;
        text-align: center;
        padding: 25rpx 0;
        font-size: 34rpx;
    }
    
    .cancel {
        color: #666;
        border-right: 1rpx solid #eee;
    }
    
    .confirm {
        color: #00DACA;
        font-weight: bold;
    }
    
    /* 底部导航栏 */
    .bottom {
        width: 100%;
        height: 120rpx;
        background-color: #ffffff;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-top: 1rpx solid #e6e6e6;
    }
    
    .bottom-item {
        text-align: center;
        font-size: 24rpx;
        color: #7d7d7d;
    }
    
    .bottom-item image {
        width: 50rpx;
        height: 50rpx;
        display: block;
        margin: 0 auto 10rpx;
    }
</style>